<template>
  <el-row>
    <el-col :span="10" :offset="1">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <template #header>
          <div>
            <span
              >尊敬的
              <span style="color: #409eff"
                >【{{ userStore.sunnyUser.nickname }}】</span
              >，下午好！</span
            >
          </div>
        </template>
        <!-- card body -->
        <div>
          <h3 style="margin-top: -20px">
            欢迎使用特斯汀学院SunnyFrame自动化测试平台
          </h3>
          <img :src="backStack" style="width: 50%; height: 172px" />
          <img :src="frontStack" style="width: 50%; height: 172px" />
        </div>
      </el-card>
    </el-col>
    <el-col :span="11" :offset="1">
      <el-card shadow="always" :body-style="{ padding: '0px' }">
        <template #header>
          <div>
            <span>运行次数统计</span>
          </div>
        </template>
        <run-summary-pie
          :chart-data="runSummaryList"
          width="100%"
          height="240px"
          v-if="runSummaryList.length > 0"
        ></run-summary-pie> </el-card
    ></el-col>
  </el-row>

  <el-row>
    <el-col :span="22" :offset="1">
      <el-card shadow="always" :body-style="{ padding: '0' }">
        <summary-bar-chart
          :chart-data="projectList"
          width="100%"
          title="项目总览"
          v-if="projectList.length > 0"
        ></summary-bar-chart
      ></el-card>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="22" :offset="1"
      ><el-card shadow="always" :body-style="{ padding: '0' }">
        <result-summary-bar
          :chart-data="resultSummaryList"
          title="运行记录"
          width="100%"
          height="200px"
          v-if="resultSummaryList.length > 0"
        ></result-summary-bar>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped>
.info-wrapper {
  text-align: center;
}
.info-content {
  writing-mode: vertical-lr;
  display: inline-block;
}

.el-row {
  margin-top: 30px;
}
</style>

<script setup lang="ts">
export interface RunSummary {
  proName: string;
  runTimes: number;
}

import { ref, onMounted, nextTick } from "vue";

import { useProjectStore } from "@/stores/sunnyProjectStore";
import { storeToRefs } from "pinia";
import SummaryBarChart from "./SummaryBarChart.vue";
import ResultSummaryBar from "./ResultSummaryBar.vue";
import RunSummaryPie from "./RunSummaryPie.vue";
import { useUserStore } from "@/stores/userStore";
import { listAllResultsApi } from "@/api/sunnyresult";
import type { SunnyResultSummary } from "@/types/sunnyResult/type";

const projectStore = useProjectStore();
const userStore = useUserStore();
const { projectList } = storeToRefs(projectStore);

const resultSummaryList = ref<SunnyResultSummary[]>([]);

const runSummaryList = ref<RunSummary[]>([]);
const backStack = ref(new URL("@/assets/img/back.jpg", import.meta.url).href);
const frontStack = ref(new URL("@/assets/img/front.jpg", import.meta.url).href);

onMounted(() => {
  userStore.getUser();
  projectStore.listProjects();
  nextTick(() => {
    listAllResultsApi()
      .then(({ data }) => {
        //将项目名补充到结果执行记录里
        data.forEach((result) => {
          let projectName = projectList.value.find(
            (project) => project.id === result.projectId
          )!.name;
          resultSummaryList.value.push({
            ...result,
            projectName,
          });
        });
      })
      .then(() => {
        //统计各个项目的执行次数
        projectList.value.forEach((project) => {
          let resultsOfPro = resultSummaryList.value.filter((result) => {
            return result.projectId === project.id;
          });
          let runtimes = resultsOfPro.length;
          console.log(
            project.name + "的执行结果列表为",
            resultsOfPro,
            "长度为",
            runtimes
          );
          runSummaryList.value.push({
            proName: project.name,
            runTimes: runtimes,
          });
        });
        console.log("统计的项目执行次数是：", runSummaryList.value);
      });
  });
});
</script>
